$(function () {
  renderEduBar();
  renderHomeBar();
  renderPostBar();
  renderProfessionBar();
  renderGradeLine();
  renderScoreLine();
  renderNature3dPie();
  renderPies('marriageChart',
    '婚姻状况', [
      {value: 33, name: '已婚'},
      {value: 31, name: '未婚'},
      {value: 23, name: '离婚'}
    ]);
  renderPies('bloodChart', '血型', [
    {value: 33, name: 'A型'},
    {value: 31, name: 'B型'},
    {value: 23, name: 'AB型'},
    {value: 25, name: 'O型'},
  ]);
  renderPies('residenceChart', '户口', [
    {value: 33, name: '非农户口'},
    {value: 31, name: '农村户口'},
  ]);
  renderPies('politicalChart', '政治面貌', [
    {value: 33, name: '党员'},
    {value: 31, name: '群众'},
    {value: 31, name: '团员'}
  ]);
});

/**
 * 渲染文化程度柱状图
 */
function renderEduBar() {
  var myChart = echarts.init(document.getElementById('eduChart'));
  var myColor = ['#87e447', '#f4ef90', '#3ee477', '#00dafc', '#bce477', '#95fa53'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '人';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["大专", "初中", "本科", "高中", "硕士", "博士"]
    },
    yAxis: {
      name: '数量',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 20,
        data: [85, 40, 36, 60, 85, 40]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染来源地区柱状图
 */
function renderHomeBar() {
  var myChart = echarts.init(document.getElementById('homeChart'));
  var myColor = ['#46d4fa', '#00e4dc', '#95e477', '#ebd079', '#ff9d5e', '#95e477'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '人';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["东北", "华北", "中南", "华东", "西南", "西北"]
    },
    yAxis: {
      name: '数量',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 20,
        data: [85, 40, 36, 60, 700, 600]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染职务柱状图
 */
function renderPostBar() {
  var myChart = echarts.init(document.getElementById('postChart'));
  var myColor = ['#46d4fa', '#95e477', '#ff9d5e', '#e5bf61'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '人';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["文员", "班长", "副班长", "学员"]
    },
    yAxis: {
      name: '数量',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 20,
        data: [85, 40, 36, 60]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染专业柱状图
 */
function renderProfessionBar() {
  var myChart = echarts.init(document.getElementById('professionChart'));
  var myColor = ['#95e477', '#c0e477', '#ebd079', '#ff9d5e', '#ffc45b'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '人';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["计算机", "数学", "机械", "经济", "电气"]
    },
    yAxis: {
      name: '数量',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 20,
        data: [85, 40, 36, 60, 100]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染军衔等级折线图
 */
function renderGradeLine() {
  var myChart = echarts.init(document.getElementById('gradeChart'));
  // 指定图表的配置项和数据
  var option = {
    color:['#00e8ff'],
    grid: {
      top: 20,
      left: 70
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: '{b0}: {c0} 人'
    },
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ['一级', '二级', '三级', '四级', '五级', '六级', '七级', '八级', '九级']
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      type: 'line',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2:0,
          y2:0.8,
          colorStops: [{
            offset: 0, color: 'rgba(82,176,211,1)' // 0% 处的颜色
          }, {
            offset: 0.5, color: 'rgba(82,176,211,.5)' // 50% 处的颜色
          },{
            offset: 1, color: 'rgba(82,176,211,.1)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      smooth: true,
      data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290]
    }]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染考评情况折线图
 */
function renderScoreLine() {
  var myChart = echarts.init(document.getElementById('scoreChart'));
  // 指定图表的配置项和数据
  var option = {
    color:['#00e8ff'],
    grid: {
      top: 20,
      left: 70
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: '{b0}: {c0} 人'
    },
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ['优秀', '良好', '合格', '不合格']
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      type: 'line',
      itemStyle: {
        opacity: 0
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2:0,
          y2:0.8,
          colorStops: [{
            offset: 0, color: 'rgba(82,176,211,1)' // 0% 处的颜色
          }, {
            offset: 0.5, color: 'rgba(82,176,211,.5)' // 50% 处的颜色
          },{
            offset: 1, color: 'rgba(82,176,211,.1)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      smooth: true,
      data: [820, 932, 901, 934]
    }]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染工作性质3d饼图
 */
function renderNature3dPie() {
  var each = Highcharts.each,
    round = Math.round,
    cos = Math.cos,
    sin = Math.sin,
    deg2rad = Math.deg2rad;
  Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));
    // Do not do this if the chart is not 3D
    if (!this.chart.is3d()) {
      return;
    }
    var series = this,
      chart = series.chart,
      options = chart.options,
      seriesOptions = series.options,
      depth = seriesOptions.depth || 0,
      options3d = options.chart.options3d,
      alpha = options3d.alpha,
      beta = options3d.beta,
      z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
    z += depth / 2;
    if (seriesOptions.grouping !== false) {
      z = 0;
    }
    each(series.data, function (point) {
      var shapeArgs = point.shapeArgs,
        angle;
      point.shapeType = 'arc3d';
      var ran = point.options.h;
      shapeArgs.z = z;
      shapeArgs.depth = depth * 0.75 + ran;
      shapeArgs.alpha = alpha;
      shapeArgs.beta = beta;
      shapeArgs.center = series.center;
      shapeArgs.ran = ran;
      angle = (shapeArgs.end + shapeArgs.start) / 2;
      point.slicedTranslation = {
        translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
        translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
      };
    });
  });
  (function (H) {
    H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
      // Run original proceed method
      var ret = proceed.apply(this, [].slice.call(arguments, 1));
      ret.zTop = (ret.zOut + 0.5) / 100;
      return ret;
    });
  }(Highcharts));
  Highcharts.chart('natureChart', {
    colors: ['#00b3e4','#ffbf2b', '#ff646b', '#9bce41', ],
    title: {
      text: null
    },
    credits: {
      enabled: false // 禁用版权信息
    },
    chart: {
      type: 'pie',
      animation: false,
      events: {
        load: function () {
          var each = Highcharts.each,
            points = this.series[0].points;
          each(points, function (p, i) {
            p.graphic.attr({
              translateY: -p.shapeArgs.ran
            });
            p.graphic.side1.attr({
              translateY: -p.shapeArgs.ran
            });
            p.graphic.side2.attr({
              translateY: -p.shapeArgs.ran
            });
          });
        }
      },
      options3d: {
        enabled: true,
        alpha: 75,
        beta: 0
      },
      backgroundColor: null
    },
    plotOptions: {
      pie: {
        size: 250,
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 35,
        dataLabels: {
          enabled: true,
          format: '{point.name}<br/><br/>{y}人',
          style: {
            color: '#fff',
            fontSize: '16px'
          }
        },
        startAngle: 270,
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.2lf}%</b><br/>',
          valueSuffix: '%',
        }
      }
    },
    series: [{
      type: 'pie',
      name: '工作性质',
      data: [
        {
          name: '普通岗位',
          y: 3500,
          h: 20
        },
        {
          name: '指挥技术',
          y: 1200,
          h: 20
        },
        {
          name: '专业技术',
          y: 202,
          h: 20
        },
        {
          name: '指挥管理',
          y: 2600,
          h: 20
        }
      ]
    }]
  });
}

function renderPies(id, seriesName, data) {
  var myChart = echarts.init(document.getElementById(id));
  // 指定图表的配置项和数据
  var option = {
    color: ['#309aca', '#ff9d5e', '#f9da7b', '#a2ff00'],
    series: [
      {
        name: seriesName,
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        labelLine: {
          length: 10,
          length2: 0
        },
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}